﻿@model CustomerEmailPreferenceModel
@using SpotsHub.Gateway.Models.Customer;
@{
    Layout = "~/Views/Shared/_MyHUB.cshtml";

    //title
    ViewBag.Title = T("Account.MyAccount") + " - " + T("Account.CustomerEmailPreference");
}
@section left
{
    @Html.Partial("MyAccountNavigation", Model.NavigationModel, new ViewDataDictionary())
}
<div class="page customer-info-page">

    <div class="my-hub-body account-info">
        <h2 class="section-title">@T("Account.CustomerEmailPreference")</h2>
        @*<p>I would like to receive the following email(s) from SpotsHUB:</p>*@
        <p>You are currently scheduled to receive the following "checked" emails. To change your preferences, simply check or uncheck the related box and click update to save your changes.</p>
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
            <div class="message-error">
                @Html.ValidationSummary(true)
            </div>    
            
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                
                <input type="checkbox" name="AllLogistics" id="AllLogistics" />
                <label for="AllLogistics">@T("Account.EmailPreference.ShippingOrderMessages")</label>
                <ul class="allLogistics">
                    <li>
                        @Html.CheckBoxFor(model => model.LogisticsInvoicePaid)
                        @Html.LabelFor(model => model.LogisticsInvoicePaid)
                    </li>
                    <li>
                        @Html.CheckBoxFor(model => model.LogisticsInvoiceReady)
                        @Html.LabelFor(model => model.LogisticsInvoiceReady)
                    </li>
                    <li>
                        @Html.CheckBoxFor(model => model.LogisticsOrderPlaced)
                        @Html.LabelFor(model => model.LogisticsOrderPlaced)
                    </li>
                    <li>
                        @Html.CheckBoxFor(model => model.LogisticsDelivered)
                        @Html.LabelFor(model => model.LogisticsDelivered)
                    </li>
                    <li>
                        @Html.CheckBoxFor(model => model.LogisticsFailedPickup)
                        @Html.LabelFor(model => model.LogisticsFailedPickup)
                    </li>
                </ul>
                    <button type="submit" name="save-info-button" class="btn save-customer-info-button">Update</button>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <input type="checkbox" name="AllCommerce" id="AllCommerce" />
                <label for="AllCommerce">@T("Account.EmailPreference.ShoppingMessages")</label>
                <ul class="allCommerce">

                    <li>
                        @Html.CheckBoxFor(model => model.CommerceOrderPlaced)
                        @Html.LabelFor(model => model.CommerceOrderPlaced)
                    </li>
                </ul>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                @Html.CheckBoxFor(model => model.NewsLetterSubscription)
                @Html.LabelFor(model => model.NewsLetterSubscription)
            </div>
        
        }
    </div>
    
    <script type="text/javascript">
        $(document).ready(function () {
            checkGroupedInputs();
        });
        $(".allCommerce input[type=checkbox], .allLogistics input[type=checkbox]").change(function () {
            checkGroupedInputs();
        });
        $("#AllLogistics").change(function () {
            if ($(this).attr("checked")) {
                $(".allLogistics input[type=checkbox]").each(function () {
                    $(this).attr("checked", true);
                });
            } else {
                $(".allLogistics input[type=checkbox]").each(function () {
                    $(this).attr("checked", false);
                });
            }
        });
        $("#AllCommerce").change(function () {
            if ($(this).attr("checked")) {
                $(".allCommerce input[type=checkbox]").each(function () {
                    $(this).attr("checked", true);
                });
            } else {
                $(".allCommerce input[type=checkbox]").each(function () {
                    $(this).attr("checked", false);
                });
            }
        });
        function checkGroupedInputs() {
            var logisticscount = 0, commercecount = 0;
            $(".allLogistics input[type=checkbox]").each(function () {
                if ($(this).attr("checked")) {
                    logisticscount += 1;
                }
            });
            $(".allCommerce input[type=checkbox]").each(function () {
                if ($(this).attr("checked")) {
                    commercecount += 1;
                }
            });
            if (logisticscount == $(".allLogistics input[type=checkbox]").length) {
                $("#AllLogistics").prop("indeterminate", false);
                $("#AllLogistics").attr("checked", true);
            } else if (logisticscount == 0) {
                $("#AllLogistics").prop("indeterminate", false);
                $("#AllLogistics").attr("checked", false);
            } else {
                $("#AllLogistics").prop("indeterminate", true);
            }
            if (commercecount == $(".allCommerce input[type=checkbox]").length) {
                $("#AllCommerce").prop("indeterminate", false);
                $("#AllCommerce").attr("checked", true);
            } else if (commercecount == 0) {
                $("#AllCommerce").prop("indeterminate", false);
                $("#AllCommerce").attr("checked", false);
            } else {
                $("#AllCommerce").prop("indeterminate", true);
            }
        }
    </script>
</div>